<template>
  <div>
    <div style="overflow: hidden">
      <MyDog
        v-for="(item, index) in dogs"
        :key="index"
        :obj="item"
        @like-event="like"
      ></MyDog>
    </div>
    <p>你喜欢的狗如下</p>
    <div v-for="(item, index) in likeDogs" :key="index">{{ item }}</div>
    <hr />
    <table>
      <LianxiTwo
        v-for="(item, index) in goodsArr"
        :key="index"
        :obj="item"
        @input-event="item.count = $event - 0"
      ></LianxiTwo>
    </table>
    <p>All Number:{{ num }}</p>
    <hr />
    <div>
      <h3>练习6</h3>
      <p>商品清单如下：</p>
      <div v-for="(item, index) in foodsList" :key="index">
        {{ item.shopName }}:{{ item.price }}元/份
      </div>
      <p>请选择购买数量：</p>
      <div>
        <LianxiThree
          v-for="(item, index) in foodsList"
          :key="index"
          :obj="item"
          @change-count="item.count = $event"
        ></LianxiThree>
        <p>总价为:{{ total }}</p>
      </div>
    </div>
    <hr />
    <div>
      <h3>购物车</h3>
      <table border="1" width="700" style="border-collapse: collapse">
        <caption>
          购物车
        </caption>
        <thead>
          <tr>
            <th><input type="checkbox" v-model="all" /> <span>全选</span></th>
            <th>名称</th>
            <th>价格</th>
            <th>数量</th>
            <th>总价</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <GouwuChe
            v-for="(item, index) in goodList"
            :key="index"
            :obj="item"
            @del-event="handleDel"
            @select="handleSelect"
            @change="item.num = $event"
          ></GouwuChe>
        </tbody>
        <tfoot>
          <tr>
            <td>合计:</td>
            <td colspan="5">{{ totalPrice }}</td>
          </tr>
        </tfoot>
      </table>
    </div>
    <hr />
    <div>
      <h3>做数学题</h3>
      <div id="app">
        <h2>测试题</h2>
        <div><MySubject v-for="(item,index) in arr" :key="index" :obj="item"
        @get-sum="item.result=$event"
        ></MySubject></div>
        <div>
          <MyFlag v-for="(item,index) in arr" :key="index" :obj="item"></MyFlag>
        </div>
      </div>
    </div>
    <hr>
    <h3>表格</h3>
    <div class="table-case">
    <MyTable
    :data="goods"
    >
      <template #header>
        <th>编号</th>
        <th>图片</th>
        <th>名称</th>
        <th width="100px">标签</th>
      </template>
      <template #body="{row}">
        <td>{{row.id}}</td>
        <td>
          <img
            :src="row.picture"
          />
        </td>
        <td>{{row.name}}</td>
        <td><MyTag v-model="row.tag"></MyTag></td>
      </template>
    </MyTable>
  </div>
  </div>
</template>

<script>
import MyDog from "./components/my-dog.vue";
import LianxiTwo from "@/components/LianxiTwo.vue";
import LianxiThree from "@/components/LianxiThree.vue";
import GouwuChe from "@/components/GouwuChe.vue";
import MySubject from "@/components/MySubject.vue";
import MyFlag from "@/components/MyFlag.vue";
import MyTag from '@/components/MyTag.vue';
import MyTable from '@/components/MyTable.vue';
export default {
  name: "App",
  components: {
    MyDog,
    LianxiTwo,
    LianxiThree,
    GouwuChe,
    MySubject,
    MyFlag,
    MyTag,
    MyTable
  },
  props: {},
  data() {
    return {
      dogs: [
        {
          dogImgUrl:
            "https://img0.baidu.com/it/u=377978490,886024413&fm=253&fmt=auto&app=138&f=GIF?w=500&h=333",
          dogName: "博美",
        },
        {
          dogImgUrl:
            "https://img0.baidu.com/it/u=685285523,3980646488&fm=253&fmt=auto&app=138&f=JPEG?w=650&h=455",
          dogName: "泰迪",
        },
        {
          dogImgUrl:
            "https://img0.baidu.com/it/u=3665843828,2579699167&fm=253&fmt=auto&app=120&f=JPEG?w=801&h=500",
          dogName: "金毛",
        },
        {
          dogImgUrl:
            "https://img2.baidu.com/it/u=352370740,2947224859&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=350",
          dogName: "哈士奇",
        },
        {
          dogImgUrl:
            "https://img0.baidu.com/it/u=3796728843,2852609090&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=427",
          dogName: "阿拉斯加",
        },
        {
          dogImgUrl:
            "https://img2.baidu.com/it/u=695418473,11748117&fm=253&fmt=auto&app=138&f=JPEG?w=666&h=500",
          dogName: "萨摩耶",
        },
      ],
      likeDogs: [],
      goodsArr: [
        {
          count: 0,
          goodsName: "Watermelon",
        },
        {
          count: 0,
          goodsName: "Banana",
        },
        {
          count: 0,
          goodsName: "Orange",
        },
        {
          count: 0,
          goodsName: "Pineapple",
        },
        {
          count: 0,
          goodsName: "Strawberry",
        },
      ],
      foodsList: [
        {
          shopName: "可比克薯片",
          price: 5.5,
          count: 0,
        },
        {
          shopName: "草莓酱",
          price: 3.5,
          count: 0,
        },
        {
          shopName: "红烧肉",
          price: 55,
          count: 0,
        },
        {
          shopName: "方便面",
          price: 12,
          count: 0,
        },
      ],
      goodList: [
        {
          name: "诸葛亮",
          price: 1000,
          num: 1,
          checked: false,
        },
        {
          name: "蔡文姬",
          price: 1500,
          num: 1,
          checked: false,
        },
        {
          name: "妲己",
          price: 2000,
          num: 1,
          checked: false,
        },
        {
          name: "鲁班",
          price: 2200,
          num: 1,
          checked: false,
        },
      ],
      arr:[],
      goods: [
        { id: 101, picture: 'https://yanxuan-item.nosdn.127.net/f8c37ffa41ab1eb84bff499e1f6acfc7.jpg', name: '梨皮朱泥三绝清代小品壶经典款紫砂壶', tag: '茶具' },
        { id: 102, picture: 'https://yanxuan-item.nosdn.127.net/221317c85274a188174352474b859d7b.jpg', name: '全防水HABU旋钮牛皮户外徒步鞋山宁泰抗菌', tag: '男鞋' },
        { id: 103, picture: 'https://yanxuan-item.nosdn.127.net/cd4b840751ef4f7505c85004f0bebcb5.png', name: '毛茸茸小熊出没，儿童羊羔绒背心73-90cm', tag: '儿童服饰' },
        { id: 104, picture: 'https://yanxuan-item.nosdn.127.net/56eb25a38d7a630e76a608a9360eec6b.jpg', name: '基础百搭，儿童套头针织毛衣1-9岁', tag: '儿童服饰' },
      ]
    };
  },
  computed: {
    num() {
      return this.goodsArr.reduce((sum, item) => sum + item.count * 1, 0);
    },
    total() {
      return this.foodsList.reduce(
        (sum, item) => sum + item.count * item.price,
        0
      );
    },
    all: {
      get() {
        return this.goodList.every((item) => item.checked === true);
      },
      set(value) {
        this.goodList.forEach((item) => (item.checked = value));
      },
    },
    totalPrice() {
      return this.goodList
        .filter((item) => item.checked === true)
        .reduce((sum, item) => sum + item.price * item.num, 0);
    },
  },
  watch: {},
  created() {
    const arr=[]
    for(let i=1; i<=5;i++) {
      const left = Math.floor(Math.random()*11)
      const right = Math.floor(Math.random()*11)
      const result = null
      arr.push({left,right,result})
    }
    this.arr = arr
  },
  methods: {
    like(name) {
      this.likeDogs.push(name);
    },
    handleDel(name) {
      const index = this.goodList.findIndex((item) => item.name === name);
      this.goodList.splice(index, 1);
    },
    handleSelect(name) {
      const obj = this.goodList.find((item) => item.name === name);
      obj.checked = !obj.checked;
    },
  },
};
</script>

<style scoped lang="less">
.table-case {
  width: 1000px;
  margin: 50px auto;
  img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    vertical-align: middle;
  }
}


</style>
